<script setup>
function onToCreate(){
  uni.navigateTo({
    url:'/myuser/createdAddress/createdAddress'
  })
}
</script>

<template>
  <view style="background: rgba(0,0,0,0.04);height:100vh;">
    <view class="header">
      <view>地址管理</view>
    </view>

    <view class="addressContent">
      <view class='address-box'>
        <view class="address-title">王老二 <text class="address-text">1668****9098</text></view>
        <view class="address-p">神龙教主</view>
      </view>
      <view class="address-bottom">
        <radio value="r1" checked="true" />选中该地址
        <view class="bianji">
          <image class="bianji-image" src="/src/assets/bianji.png"></image>
          <view>编辑</view>
        </view>
        <view class="delete">
          <image class="delete-image" src="/src/assets/shanchu.png"></image>
          <view>编辑</view>
        </view>
      </view>
    </view>

    <view class="addressContent">
      <view class='address-box'>
        <view class="address-title">王老二 <text class="address-text">1668****9098</text></view>
        <view class="address-p">神龙教主</view>
      </view>
      <view class="address-bottom">
        <radio value="r1" checked="true" />选中该地址
        <view class="bianji">
          <image class="bianji-image" src="/src/assets/bianji.png"></image>
          <view>编辑</view>
        </view>
        <view class="delete">
          <image class="delete-image" src="/src/assets/shanchu.png"></image>
          <view>编辑</view>
        </view>
      </view>
      <button class="createAddr" @click="onToCreate">+ 添加新地址</button>
    </view>
  </view>
</template>

<style scoped lang="scss">
.header{
  width:750rpx;
  height:136rpx;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.addressContent{
  margin-bottom:16rpx;
  width:750rpx;
  background:#fff;
  .address-box{
    width:700rpx;
    height:141rpx;
    overflow: hidden;
    border-bottom:1px rgba(0, 0, 0, 0.05) solid;
    display:flex;
    .address-title{
      font-size:28rpx;
      margin-top:30rpx;
      margin-left:26rpx;
      .address-text{
        font-size:24rpx;
        margin-left:32rpx;

      }
    }
    .address-p{
      font-size:22rpx;
      color: rgba(0, 0, 0, 0.46);
      margin-top:26rpx;
      margin-left:30rpx;
    }

  }
  .address-bottom{
    width:700rpx;
    height:95rpx;
    display:flex;
    align-items: center;
    .bianji{
      display:flex;
      align-items: center;
      text-align: center;
      .bianji-image{
        width:30rpx;
        height:30rpx;
        margin-left:200rpx;
        margin-right:23rpx;
      }
    }
    .delete{
      display:flex;
      align-items: center;
      text-align: center;
      .delete-image{
        width:30rpx;
        margin-right:23rpx;
        height:30rpx;
        margin-left:50rpx;
      }
    }
  }
  button{
    position:fixed;
    bottom:30rpx;
    width:687rpx;
    height:100rpx;
    background:#ff4344;
    border-radius:50rpx;
    left:26rpx;
    color:#fff;
  }
}
</style>